<template>
  <el-form ref="areaform" :model="params" :rules="rules" label-width="80px" class="common__form">
    <el-form-item label="区域类型" prop="type">
      <el-select @change="handleChangeType" class="common__input" v-model="params.type" clearable placeholder="请选择区域类型">
        <el-option v-for="item in areaTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>
    <el-form-item label="父级区域" prop="parentLabel">
      <el-cascader class="common__input" change-on-select clearable placeholder="请选择父级区域" expand-trigger="click" :options="areaCascadeOptions" v-model="params.parentLabel" />
    </el-form-item>
    <el-form-item label="区域名称" prop="label">
      <el-input class="common__input" clearable v-model="params.label" placeholder="请输入区域名称" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" :loading="isSaveLoading" @click="submitForm">保存</el-button>
      <el-button @click="cancalForm">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { rules, params } from './options.js'

export default {
  name: 'AreaForm',
  data() {
    return {
      rules,
      isSaveLoading: false,
      params: { ...params },
      areaCascadeOptions: []
    }
  },

  props: {
    details: {}
  },

  watch: {
    details(details) {
      this.params = { ...this.params, ...details }
      this.GetAreaCascadeSupplyOptions().then(res => {
        this.areaCascadeOptions = res
        this.handleChangeType(this.params.type, false)
      })
    }
  },

  computed: {
    ...mapGetters(['areaTypeOptions', 'areaCascadeSupplyOptions'])
  },

  created() {
    if (!this.details) {
      this.GetAreaCascadeSupplyOptions().then(res => {
        this.areaCascadeOptions = res
      })
    }
  },

  methods: {
    // 监听区域类型
    handleChangeType(type, clearArea = true) {
      if (!type) return
      const options = {
        '1': 1,
        '2': 2,
        '3': 3,
        '8': 1,
        '9': 1
      }
      if (clearArea) this.params.parentLabel = []
      this.depth = options[type]
      this.areaCascadeOptions = JSON.parse(JSON.stringify(this.areaCascadeSupplyOptions))
      this.areaCascadeOptions = this.transAreaCascadeOptions(this.areaCascadeOptions)
    },

    // 区域联级数据处理
    // compare depth add disabled
    transAreaCascadeOptions(options = [], depth = 0) {
      depth++
      options && options.map(item => {
        if (depth === this.depth) item.disabled = true
        if (item.children) {
          if (!item.children.length) {
            item.children = null
            return
          }
          this.transAreaCascadeOptions(item.children, depth)
        }
      })
      return this.areaCascadeOptions
    },

    // 映射 Actions
    ...mapActions(['GetAreaCascadeSupplyOptions']),

    // 表单校验
    submitForm() {
      this.$refs['areaform'].validate((valid) => {
        if (valid) {
          this.emitFormParams()
        } else {
          return false
        }
      })
    },

    // 表单重置
    resetForm() {
      this.$refs['areaform'].resetFields()
    },

    // 参数处理
    initParams() {
      this.params = { ...params }
    },

    // emit && 参数处理
    emitFormParams() {
      const { id, type, label, parentLabel } = this.params
      const params = {
        id,
        type,
        areaName: label,
        parentId: parentLabel.slice(-1)[0] || ''
      }
      this.initParams()
      this.resetForm()
      this.$emit('save', params)
    },

    cancalForm() {
      this.$emit('cancel')
      this.resetForm()
    }
  }
}
</script>

<style lang="scss" scoped>
.common__form {
  margin: 40px auto 0;
  width: 600px;
  .common__input {
    width: 454px;
  }
}
</style>


